import React, { PureComponent } from 'react';
import { getPaperAnswerDetail, getManualPaperAnswerDetail } from '@/services/paperInfo'
import { submitExam } from '@/services/studentExam'
import styles from './index.less';
import { Col, Row, Card, Button, Statistic, Checkbox, Radio, message, Modal, Progress } from 'antd';
import QuestionButtons from './QuestionButtons'
import { history } from 'umi';
import { isLianxi } from '@/utils/utils'
import { fileurl, getHandle } from '@/services/baseurl'
import { LeftOutlined } from '@ant-design/icons'
import {stopActive} from '@/utils/utils'
const CheckboxGroup = Checkbox.Group;
const RadioGroup = Radio.Group;
const { Countdown } = Statistic;
export default class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props)
        stopActive()
        this.state = {
            single: [],
            batch: [],
            judge: [],
            info: {},
            deadline: 0,
            currentSingleIndex: 0,
            currentBatchIndex: -1,
            currentJudgeIndex: -1,
            currentQuestion: {},
            singleAnswers: [],
            batchAnswers: [],
            judgeAnswers: [],
            singleAnswerValue: null,
            batchAnswerValue: [],
            judgeAnswerValue: null,
            singleIds: [],
            batchIds: [],
            judgeIds: [],
            starttime: 0,
            grade:0,
            single_mistake:0,
            batch_mistake:0,
            judge_mistake:0,
            single_deduct:0,
            batch_deduct:0,
            judge_deduct:0,
            single_right:0,
            batch_right:0,
            judge_right:0,
            resultModal:false
        }
    }
    timeFinish = () => {
        alert('考试结束，将立即交卷')
        this.submit()
    }
    submitHandle = () => {

        Modal.confirm({
            title: '提示',
            content: '确定交卷？',
            onOk: () => {
                this.submit()
            }
        })
    }
    submit = () => {
        const { single, batch, judge, info, singleAnswers, batchAnswers, judgeAnswers, singleIds, batchIds, judgeIds, starttime } = this.state;
        const duration = Date.now() - this.state.starttime + '';
        let single_score = 0;//单选总分
        let batch_score = 0;//多选总分
        let judge_score = 0;//判断总分
        let single_mistake = 0;//做错的数量
        let batch_mistake = 0;//做错的数量
        let judge_mistake = 0;//做错的数量
        let single_deduct = 0;//没做的数量
        let batch_deduct = 0;//没做的数量
        let judge_deduct = 0;//没做的数量
        let single_right = 0;//做对的数量
        let batch_right = 0;//做对的数量
        let judge_right = 0;//做对的数量
        let correct_total = 0;
        let wrong = []; //做错的题
        let marked = []; //标记的题
        const sortNum = [single.length, batch.length, judge.length].sort();
        const loopNum = sortNum[sortNum.length - 1];
        for (let i = 0; i < loopNum; i++) {
            const singleItem = single[i];
            if (singleItem) {
                if (String(singleItem.answer).trim() === singleAnswers[i].answer) {
                    single_right++;
                    correct_total++;
                } else {
                    if (singleAnswers[i].answer) {
                        wrong.push(singleItem.id);
                        single_mistake++
                    }
                }
                if (singleAnswers[i].marked) {
                    marked.push(singleItem.id);
                }
                if (singleAnswers[i].answer === "") {
                    single_deduct++;
                }
            }
            const batchItem = batch[i];
            if (batchItem) {
                if (String(batchItem.answer).trim() === batchAnswers[i].answer) {
                    batch_right++;
                    correct_total++;
                } else {
                    if (batchAnswers[i].answer) {
                        wrong.push(batchItem.id);
                        batch_mistake++
                    }
                }
                if (batchAnswers[i].marked) {
                    marked.push(batchItem.id);
                }
                if (batchAnswers[i].answer === "") {
                    batch_deduct++;
                }
            }
            const judgeItem = judge[i];
            if (judgeItem) {
                if (judgeItem.answer === judgeAnswers[i].answer) {
                    judge_right++;
                    correct_total++;
                } else {
                    if (judgeAnswers[i].answer) {
                        wrong.push(judgeItem.id);
                        judge_mistake++
                    }
                }
                if (judgeAnswers[i].marked) {
                    marked.push(judgeItem.id);
                }
                if (judgeAnswers[i].answer === "") {
                    judge_deduct++;
                }
            }
        }
        for (let i = 0; i < batchAnswers.length; i++) {
            const item = batchAnswers[i];
            item.answer = String(item.answer).trim().replace(/,/g, '')
        }
        single_score = info.multiple_score * single_right;
        batch_score = info.choices_score * batch_right
        judge_score = info.judge_score * judge_right;
        const did_total = (single.length + batch.length + judge.length - single_deduct - batch_deduct - judge_deduct) + '';
        const total = info.total;
        const grade = single_score + batch_score + judge_score;
        const pid = this.props.match.params.id;
        const topic_id = this.props.match.params.topic_id;
        const uid = localStorage.getItem('id')
        submitExam({
            duration, pid, uid, grade, total, correct_total: correct_total + '', did_total,
            topic: [singleIds, batchIds, judgeIds], answer: [singleAnswers, batchAnswers, judgeAnswers], id: topic_id,
            wrong: wrong.join(","),
            label: marked.join(","),
        }).then(res => {
            if (res.status === 1) {
                this.setState({
                    grade,
                    single_mistake,
                    batch_mistake,
                    judge_mistake,
                    single_deduct,
                    batch_deduct,
                    judge_deduct,
                    single_right,
                    batch_right,
                    judge_right,
                    resultModal: true
                })
                message.success('已交卷')
                const operation = `提交了模拟考试（${info.name}）`
                getHandle({ operation })
                // history.push('/checkPaper/' + pid)
            } else {
                message.error('交卷失败')
            }
        })
    }
    changeSingleAnswerValue = (e: any) => {
        const { singleAnswers, currentSingleIndex } = this.state;
        singleAnswers[currentSingleIndex].answer = e.target.value
        this.setState({
            singleAnswerValue: e.target.value,
            singleAnswers
        })
    }
    changeBatchAnswerValue = (e: any) => {
        const { batchAnswers, currentBatchIndex } = this.state;
        batchAnswers[currentBatchIndex].answer = e.sort().join(',').replace(/,/g, '')
        this.setState({
            batchAnswerValue: e
        })
    }
    changeJudgeAnswerValue = (e: any) => {
        const { judgeAnswers, currentJudgeIndex } = this.state;
        judgeAnswers[currentJudgeIndex].answer = e.target.value
        this.setState({
            judgeAnswerValue: e.target.value
        })
    }
    changeCurrentQuestion = (index: number, type: string, currentQuestion: any) => {
        const { singleAnswers, batchAnswers, judgeAnswers } = this.state;
        this.setState({
            [type]: index,
            currentQuestion,
        })
        if (type === 'currentSingleIndex') {
            this.setState({
                currentBatchIndex: -1,
                currentJudgeIndex: -1,
                singleAnswerValue: singleAnswers[index].answer
            })
        }
        if (type === 'currentBatchIndex') {
            let batchAnswerValue = []
            for (let i = 0; i < batchAnswers[index].answer.length; i++) {
                const item = batchAnswers[index].answer[i];
                batchAnswerValue.push(item)
            }
            this.setState({
                currentSingleIndex: -1,
                currentJudgeIndex: -1,
                batchAnswerValue
            })
        }
        if (type === 'currentJudgeIndex') {
            this.setState({
                currentSingleIndex: -1,
                currentBatchIndex: -1,
                judgeAnswerValue: judgeAnswers[index].answer
            })
        }
    }
    prevQuestion = (obj: string) => () => {
        const {
            single,
            batch,
            judge,
            singleAnswers,
            batchAnswers,
            judgeAnswers,
        } = this.state;
        let questionIndex = this.state[obj];
        if (obj === "currentSingleIndex") {
            singleAnswers[questionIndex].notFinish = true;
        } else if (obj === "currentBatchIndex") {
            batchAnswers[questionIndex].notFinish = true;
        } else {
            judgeAnswers[questionIndex].notFinish = true;
        }
        questionIndex = questionIndex - 1;
        if (obj === "currentSingleIndex") {
            if (questionIndex < 0) return message.warn("已经是第一题了");
            this.setState({
                currentSingleIndex: questionIndex,
                currentQuestion: single[questionIndex],
                singleAnswerValue: singleAnswers[questionIndex].answer,
            });
        }
        if (obj === "currentJudgeIndex") {
            if (questionIndex < 0) {
                if (!single[0]) return message.warn("已经是第一题了");
                this.setState({
                    currentQuestion: single[single.length - 1],
                    currentSingleIndex: single.length - 1,
                    currentJudgeIndex: -1,
                });
                return;
            }
            this.setState({
                currentJudgeIndex: questionIndex,
                currentQuestion: judge[questionIndex],
                judgeAnswerValue: judgeAnswers[questionIndex].answer,
            });
        }
        if (obj === "currentBatchIndex") {
            if (!single[0] && !batch[0]) return message.warn("已经是第一题了");
            if (questionIndex < 0) {
                if (judge[0]) {
                    return this.setState({
                        currentQuestion: judge[judge.length - 1],
                        currentJudgeIndex: judge.length - 1,
                        currentBatchIndex: -1,
                    });
                }
                if (single[0]) {
                    return this.setState({
                        currentQuestion: single[single.length - 1],
                        currentSingleIndex: single.length - 1,
                        currentBatchIndex: -1,
                    });
                }
                this.setState({
                    currentQuestion: judge[judge.length - 1],
                    currentJudgeIndex: judge.length - 1,
                    currentBatchIndex: -1,
                });
            }
            let batchAnswerValue = [];
            for (let i = 0; i < batchAnswers[questionIndex].answer.length; i++) {
                const item = batchAnswers[questionIndex].answer[i];
                batchAnswerValue.push(item);
            }
            this.setState({
                currentBatchIndex: questionIndex,
                currentQuestion: batch[questionIndex],
                batchAnswerValue,
            });
        }
    };
    nextQuestion = (obj: string) => () => {
        const {
            single,
            batch,
            judge,
            singleAnswers,
            batchAnswers,
            judgeAnswers,
        } = this.state;
        let questionIndex = this.state[obj];
        if (obj === "currentSingleIndex") {
            singleAnswers[questionIndex].notFinish = true;
        } else if (obj === "currentBatchIndex") {
            batchAnswers[questionIndex].notFinish = true;
        } else {
            judgeAnswers[questionIndex].notFinish = true;
        }
        questionIndex = questionIndex + 1;
        if (obj === "currentSingleIndex") {
            if (questionIndex >= single.length) {
                if (!judge[0] && !batch[0]) return message.warn("已经是最后一题了");
                if (judge[0]) {
                    return this.setState({
                        currentJudgeIndex: 0,
                        currentQuestion: judge[0],
                        currentSingleIndex: -1,
                    });
                }
                if (batch[0]) {
                    return this.setState({
                        currentBatchIndex: 0,
                        currentQuestion: batch[0],
                        currentSingleIndex: -1,
                    });
                }
                return;
            }
            this.setState({
                currentSingleIndex: questionIndex,
                currentQuestion: single[questionIndex],
                singleAnswerValue: singleAnswers[questionIndex].answer,
            });
        }
        if (obj === "currentJudgeIndex") {
            if (questionIndex >= judge.length) {
                if (!batch[0]) return message.warn("已经是最后一题了");
                this.setState({
                    currentBatchIndex: 0,
                    currentQuestion: batch[0],
                    currentJudgeIndex: -1,
                });
                return;
            }
            this.setState({
                currentJudgeIndex: questionIndex,
                currentQuestion: judge[questionIndex],
                judgeAnswerValue: judgeAnswers[questionIndex].answer,
            });
        }
        if (obj === "currentBatchIndex") {
            if (questionIndex >= batch.length)
                return message.warn("已经是最后一题了");
            this.setState({
                currentBatchIndex: questionIndex,
                currentQuestion: batch[questionIndex],
                batchAnswerValue: batchAnswers[questionIndex].answer,
            });
        }
    };
    markQuestion = (obj: string) => () => {
        const { singleAnswers, batchAnswers, judgeAnswers } = this.state;
        const current = this.state[obj];
        message.success('已标记')
        if (obj === 'currentSingleIndex') {
            singleAnswers[current].marked = true
        }
        if (obj === 'currentBatchIndex') {
            batchAnswers[current].marked = true
        }
        if (obj === 'currentJudgeIndex') {
            judgeAnswers[current].marked = true
        }
    }
    cancelMarkQuestion = (obj: string) => () => {
        const { singleAnswers, batchAnswers, judgeAnswers } = this.state;
        const current = this.state[obj];
        message.success('已取消')
        if (obj === 'currentSingleIndex') {
            singleAnswers[current].marked = false
        }
        if (obj === 'currentBatchIndex') {
            batchAnswers[current].marked = false
        }
        if (obj === 'currentJudgeIndex') {
            judgeAnswers[current].marked = false
        }
    }
    componentDidMount() {
        const uid = localStorage.getItem('id');
        if (!uid) {
            message.error('请先登录')
            this.props.history.push('/login')
            return
        }
        this.setState({
            starttime: Date.now()
        })

        document.body.style.background = '#f0f0f0'
        const id = this.props.match.params.id;
        const { singleIds, batchIds, judgeIds } = this.state;
        this.props.match.params.type === '1' ?
            getPaperAnswerDetail({ id }).then(res => {
                let singleAnswers = [];
                let batchAnswers = [];
                let judgeAnswers = [];
                this.setState({
                    info: res[3],
                })
                if (!res[0][0] && !res[1][0] && !res[2][0]) return;
                for (let i = 0; i < res[0].length; i++) {
                    singleAnswers.push({ answer: '', mark: false })
                    singleIds.push(res[0][i].id)
                }
                for (let i = 0; i < res[1].length; i++) {
                    batchAnswers.push({ answer: '', mark: false })
                    batchIds.push(res[1][i].id)
                }
                for (let i = 0; i < res[2].length; i++) {
                    // if (res[2][i].a === '正确') {
                    //     res[2][i].answer = 'A'
                    // } else {
                    //     res[2][i].answer = 'B'
                    // }
                    judgeIds.push(res[2][i].id)
                    judgeAnswers.push({ answer: '', mark: false })
                }
                this.setState({
                    single: res[0],
                    batch: res[1],
                    judge: res[2],
                    singleAnswers,
                    batchAnswers,
                    judgeAnswers,
                    deadline: Date.now() + 1000 * 60 * res[3].test_time,
                    currentQuestion: res[0][0],
                    singleIds, batchIds, judgeIds
                })
            }) : getManualPaperAnswerDetail({ id }).then(res => {
                let singleAnswers = [];
                let batchAnswers = [];
                let judgeAnswers = [];
                for (let i = 0; i < res[0].length; i++) {
                    singleAnswers.push({ answer: '', mark: false })
                    singleIds.push(res[0][i].id)
                }
                for (let i = 0; i < res[1].length; i++) {
                    batchAnswers.push({ answer: '', mark: false })
                    batchIds.push(res[1][i].id)
                }
                for (let i = 0; i < res[2].length; i++) {
                    // if (res[2][i].a === '正确') {
                    //     res[2][i].answer = 'A'
                    // } else {
                    //     res[2][i].answer = 'B'
                    // }
                    judgeIds.push(res[2][i].id)
                    judgeAnswers.push({ answer: '', mark: false })
                }
                this.setState({
                    single: res[0],
                    batch: res[1],
                    judge: res[2],
                    info: res[3],
                    singleAnswers,
                    batchAnswers,
                    judgeAnswers,
                    deadline: Date.now() + 1000 * 60 * res[3].test_time,
                    currentQuestion: res[0][0],
                    singleIds, batchIds, judgeIds
                })
            })
    }
    render() {
        const { single, batch, judge, info, deadline, currentQuestion, currentSingleIndex, singleAnswers, batchAnswers, judgeAnswers,
            currentBatchIndex, currentJudgeIndex, singleAnswerValue, batchAnswerValue, judgeAnswerValue ,resultModal,
            grade,single_mistake,batch_mistake,judge_mistake,single_deduct,batch_deduct,judge_deduct,single_right,batch_right,judge_right,} = this.state;
        const name = localStorage.getItem('name');
        const id_number = localStorage.getItem('id_number');
        const type = this.props.match.params.type;
        const gradePercent = grade/info.total*100;
        const rightNum = single_right+batch_right+judge_right;
        const mistakeNum = single_mistake+batch_mistake+judge_mistake;
        const deductNum = single_deduct+batch_deduct+judge_deduct;
        const pid = this.props.match.params.id;
        const { showAnswer } = this.props.match.params;
        return (
            <React.Fragment >
                <div className={styles['header']}>
                    <img className={styles['picture']} src="Https://www.shejiyuan.com/Public/images/exam_avatar.png" alt="" />
                    <b>考生姓名：</b>{name} <b>考生考号：</b>  {id_number}<b>考试科目：</b>{info.name}
                    <div className={styles['header-right']}>
                        <div className={styles['countdown-container']}>
                            <Countdown
                                prefix="剩余时间："
                                valueStyle={{ fontSize: 18, fontWeight: 'bold', color: "red" }}
                                className={styles['countdown']}
                                value={deadline}
                                onFinish={this.timeFinish}
                            />
                        </div>

                    </div>
                </div>
                <Row gutter={10}>
                    <Col span={5}>
                        <Card style={{ margin: '25px 0 25px 25px', height: '80vh', overflowY: 'auto' }}>

                            <h4> 一、单选题    (共<b>{single.length}</b>题,每题<b>{info.multiple_score}</b>分,说明:选择一项正确的答案)</h4>
                            <QuestionButtons answers={singleAnswers} onClick={this.changeCurrentQuestion} currentIndex={currentSingleIndex} type="currentSingleIndex" data={single} />
                            <h4> 二、判断   (共<b>{judge.length}</b>题,每题<b>{info.judge_score}</b>分,说明:选择一项正确的答案)</h4>
                            <QuestionButtons answers={judgeAnswers} onClick={this.changeCurrentQuestion} currentIndex={currentJudgeIndex} type="currentJudgeIndex" data={judge} />
                            {
                                !isLianxi() && <React.Fragment>
                                    <h4> 三、多选题    (共<b>{batch.length}</b>题,每题<b>{info.choices_score}</b>分,说明:选择一项正确的答案)</h4>
                                    <QuestionButtons answers={batchAnswers} onClick={this.changeCurrentQuestion} currentIndex={currentBatchIndex} type="currentBatchIndex" data={batch} />
                                </React.Fragment>
                            }

                            <Row gutter={10} className={styles['tips']}>
                                <Col span={4}><div className={styles['tips-item2']}>已做</div></Col>
                                <Col span={4}><div className={styles['tips-item1']}>未做</div></Col>
                                <Col span={4}><div className={styles['tips-item4']}>标记</div></Col>
                            </Row>
                        </Card>

                    </Col>
                    <Col span={19}>
                        <Card style={{ margin: '25px 25px 25px 0px', height: '80vh', overflowY: 'auto', userSelect: 'none' }}>

                            {
                                currentQuestion && currentQuestion.type === 1 &&
                                (
                                    <React.Fragment>
                                        <h3>单选题</h3>
                                        <p className={styles['question-content']}>
                                            {currentSingleIndex + 1 + '.' + currentQuestion.content}
                                        </p>
                                        {
                                            currentQuestion.img && <img src={fileurl(currentQuestion.is_jc) + currentQuestion.img} style={{ width: '100%', cursor: 'pointer', marginTop: 10, display: 'block' }} alt=" " />
                                        }
                                        <RadioGroup value={singleAnswerValue} onChange={this.changeSingleAnswerValue}>
                                            {currentQuestion.a && <div className={styles['question-answer-item']}><Radio key="A" value="A">A.{currentQuestion.a}</Radio></div>}
                                            {currentQuestion.b && <div className={styles['question-answer-item']}><Radio key="B" value="B">B.{currentQuestion.b}</Radio></div>}
                                            {currentQuestion.c && <div className={styles['question-answer-item']}><Radio key="C" value="C">C.{currentQuestion.c}</Radio></div>}
                                            {currentQuestion.d && <div className={styles['question-answer-item']}><Radio key="D" value="D">D.{currentQuestion.d}</Radio></div>}
                                            {currentQuestion.e && <div className={styles['question-answer-item']}><Radio key="E" value="E">E.{currentQuestion.e}</Radio></div>}
                                            {currentQuestion.f && <div className={styles['question-answer-item']}><Radio key="F" value="F">F.{currentQuestion.f}</Radio></div>}
                                        </RadioGroup>
                                        <div style={{ marginTop: 25 }}>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.prevQuestion('currentSingleIndex')}>上一题</Button>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.nextQuestion('currentSingleIndex')}>下一题</Button>
                                            <Button type="primary" danger style={{ marginRight: 20 }} onClick={this.markQuestion('currentSingleIndex')}>标记本题</Button>
                                            <Button onClick={this.cancelMarkQuestion('currentSingleIndex')}>取消标记</Button>
                                            {showAnswer === "1" &&
                                                singleAnswers[currentSingleIndex].answer && (
                                                    <div>
                                                        <div style={{ padding: 10, marginTop: 20, background: "#f5f5f5" }}>
                                                            正确答案：
                                                        <b style={{ color: "red" }}>{currentQuestion.answer}</b>
                                                        </div>
                                                        {
                                                           currentQuestion.answer_that && <div style={{ padding: 10, marginTop: 20, background: "#f5f5f5" }}>
                                                                答案解析:
                                                            <b>{currentQuestion.answer_that}</b>
                                                            </div>
                                                        }

                                                    </div>
                                                )}
                                        </div>
                                    </React.Fragment>
                                )
                            }
                            {
                                currentQuestion && currentQuestion.type === 2 && (
                                    <React.Fragment>
                                        <h3>多选题</h3>
                                        <p className={styles['question-content']}>
                                            {currentBatchIndex + 1 + '.' + currentQuestion.content}
                                        </p>
                                        {
                                            currentQuestion.img && <img src={fileurl(currentQuestion.is_jc) + currentQuestion.img} style={{ width: '100%', cursor: 'pointer', marginTop: 10, display: 'block' }} alt=" " />
                                        }
                                        <CheckboxGroup value={batchAnswerValue} onChange={this.changeBatchAnswerValue}>
                                            {currentQuestion.a && <div className={styles['question-answer-item']}><Checkbox key="A" value="A">A.{currentQuestion.a}</Checkbox></div>}
                                            {currentQuestion.b && <div className={styles['question-answer-item']}><Checkbox key="B" value="B">B.{currentQuestion.b}</Checkbox></div>}
                                            {currentQuestion.c && <div className={styles['question-answer-item']}><Checkbox key="C" value="C">C.{currentQuestion.c}</Checkbox></div>}
                                            {currentQuestion.d && <div className={styles['question-answer-item']}><Checkbox key="D" value="D">D.{currentQuestion.d}</Checkbox></div>}
                                            {currentQuestion.e && <div className={styles['question-answer-item']}><Checkbox key="E" value="E">E.{currentQuestion.e}</Checkbox></div>}
                                            {currentQuestion.f && <div className={styles['question-answer-item']}><Checkbox key="F" value="F">F.{currentQuestion.f}</Checkbox></div>}
                                        </CheckboxGroup>
                                        <div style={{ marginTop: 25 }}>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.prevQuestion('currentBatchIndex')}>上一题</Button>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.nextQuestion('currentBatchIndex')}>下一题</Button>
                                            <Button type="primary" danger style={{ marginRight: 20 }} onClick={this.markQuestion('currentBatchIndex')}>标记本题</Button>
                                            <Button onClick={this.cancelMarkQuestion('currentBatchIndex')}>取消标记</Button>
                                            {showAnswer === "1" &&
                                                batchAnswers[currentBatchIndex].answer && (
                                                    <div>
                                                        <div style={{ padding: 10, marginTop: 20, background: "#f5f5f5" }}>
                                                            正确答案：
                                                        <b style={{ color: "red" }}>{currentQuestion.answer}</b>
                                                        </div>
                                                        {
                                                            currentQuestion.answer_that && <div style={{ padding: 10, marginTop: 20, background: "#f5f5f5" }}>
                                                                答案解析:
                                                            <b>{currentQuestion.answer_that}</b>
                                                            </div>
                                                        }

                                                    </div>
                                                )}
                                        </div>
                                    </React.Fragment>
                                )
                            }
                            {
                                currentQuestion && currentQuestion.type === 3 && (
                                    <React.Fragment>
                                        <h3>判断题</h3>
                                        <p className={styles['question-content']}>
                                            {currentJudgeIndex + 1 + '.' + currentQuestion.content}
                                        </p>
                                        {
                                            currentQuestion.img && <img src={fileurl(currentQuestion.is_jc) + currentQuestion.img} style={{ width: '100%', cursor: 'pointer', marginTop: 10, display: 'block' }} alt=" " />
                                        }
                                        <RadioGroup value={judgeAnswerValue} onChange={this.changeJudgeAnswerValue}>
                                            <div className={styles['question-answer-item']}><Radio key="正确" value="正确">正确</Radio></div>
                                            <div className={styles['question-answer-item']}> <Radio key="错误" value="错误">错误</Radio></div>
                                        </RadioGroup>
                                        <div style={{ marginTop: 25 }}>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.prevQuestion('currentJudgeIndex')}>上一题</Button>
                                            <Button type="primary" style={{ marginRight: 20 }} onClick={this.nextQuestion('currentJudgeIndex')}>下一题</Button>
                                            <Button type="primary" danger style={{ marginRight: 20 }} onClick={this.markQuestion('currentJudgeIndex')}>标记本题</Button>
                                            <Button onClick={this.cancelMarkQuestion('currentJudgeIndex')}>取消标记</Button>
                                            {showAnswer === "1" &&
                                                judgeAnswers[currentJudgeIndex].answer && (
                                                    <div>
                                                        <div style={{ padding: 10, marginTop: 20, background: "#f5f5f5" }}>
                                                            正确答案：
                                                        <b style={{ color: "red" }}>{currentQuestion.answer}</b>
                                                        </div>
                                                        {
                                                            currentQuestion.answer_that && <div style={{ padding: 10, marginTop: 20, background: "#f5f5f5" }}>
                                                                答案解析:
                                                            <b>{currentQuestion.answer_that}</b>
                                                            </div>
                                                        }

                                                    </div>
                                                )}
                                        </div>
                                    </React.Fragment>
                                )
                            }
                            <Button type="primary" className={styles['submit-button']} danger onClick={this.submitHandle}>提交试卷</Button>

                        </Card>
                    </Col>

                </Row>
                <Modal visible={resultModal} onCancel={()=>{return false}} cancelButtonProps={null} closable={false}
                    title={<div style={{ textAlign: 'center' }}>
                        <p className={styles['result-back']} onClick={() => this.props.history.push(localStorage.getItem('exam_page'))}><LeftOutlined />回到主页</p>
                    我的成绩</div>} footer={null}>
                    <div className={styles['result-show']}>
                        <Progress type="circle" style={{ width: 120, margin: 'auto', display: 'block' }} percent={gradePercent} format={() => <div className={styles['result-count']}>
                            <p>{grade}</p>
                            <p>本次得分</p>
                        </div>} />
                        <Button type="primary" onClick={() => history.push('/checkPaper/' + pid+'?wrong=0')} className={styles['check-button']}>复卷</Button>
                        <Button type="primary" onClick={() => history.push('/checkPaper/' + pid+'?wrong=1')} className={styles['wrong-button']}>查看错题</Button>
                    </div>
                    <div className={styles['grade-card']}>
                        <div className={styles['right-grade']}>
                            <p>正确题数</p>
                            <p>{rightNum}</p>
                        </div>
                        <div className={styles['wrong-grade']}>
                            <p>错误题数</p>
                            <p>{mistakeNum}</p>
                        </div>
                        <div className={styles['unfinished-grade']}>
                            <p>未做题数</p>
                            <p>{deductNum}</p>
                        </div>

                    </div>
                </Modal>
            </React.Fragment>
        );
    }
}

